<template>
    <div
        :style="{
            width: detail.style.position.w + 'px',
            height: detail.style.position.h + 'px',
            background: this.detail.style.backColor,
        }"
        class="tableClass"
    >
        <div>
            <el-table
                :border="false"
                v-loading="loading"
                :cell-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :data="historyList"
                :header-cell-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :row-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
            >
                <el-table-column align="center" label="序号" type="index" />
                <el-table-column align="center" label="设备编号" prop="serialNumber" />
                <el-table-column align="center" label="设备名称" prop="deviceName" />
                <el-table-column align="center" label="日志值" prop="logValue" />
                <el-table-column align="center" label="时间" prop="createTime" />
            </el-table>
        </div>
        <Pagination
            v-show="false"
            :limit.sync="queryParams.pageSize"
            :page-size="10"
            :page-sizes="[5, 10, 15]"
            :page.sync="queryParams.pageNum"
            :style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
            :total="total"
            @pagination="getList"
        />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import BaseView from './View';
import request from '@/utils/request';

export default {
    name: 'History',
    extends: BaseView,
    components: {
        Pagination,
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 设备历史记录表格数据
            historyList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 5,
                ztGuid: this.$route.query.guid,
            },
            dateRange: [],
            realDataOptions: [],
        };
    },
    mounted() {
        this.getRealList();
        this.getList();
    },
    methods: {
        getRealList() {
            let queryParams = {
                ztGuid: this.$route.query.guid,
                pageNum: 1,
                pageSize: 10,
                orderByColumn: 'id',
                isAsc: 'desc',
            };
            let url = '/zutai/bDeviceRealData/list';
            request({
                url: url,
                method: 'get',
                params: queryParams,
            }).then((res) => {
                this.realDataOptions = res.rows;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            if (this.dateRange && this.dateRange.length == 2) {
                this.queryParams.beginTime = this.dateRange[0];
                this.queryParams.endTime = this.dateRange[1];
            } else {
                this.queryParams.beginTime = null;
                this.queryParams.endTime = null;
            }
            this.getList();
        },
        /** 查询设备历史记录列表 */
        getList() {
            this.loading = true;
            let url = '/zutai/bDeviceHistory/list';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            }).then((res) => {
                this.historyList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
    },
};
</script>
<style scoped>
.tableClass {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}

.el-input {
    background-color: brown !important;
    color: #fff !important;
}
</style>
